<template>
  <a-modal
    :title="`区域${model?'编辑':'新增'}`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-form-item label="被划分省" style="display: flex">
          <a-select v-decorator="['province']" style="width: 400px;" placeholder="省" @change="onProvinceChange($event)">
            <a-select-option :value="item.province" v-for="item in provinceList" :key="item.province">
              {{item.province }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="被划分市" style="display: flex">
          <a-select v-decorator="['city']" placeholder="市" style="width: 400px;">
            <a-select-option :value="item.city" v-for="item in cityList" :key="item.city">
              {{item.city}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="划分到的省" style="display: flex">
          <a-select v-decorator="['bind_province']"  style="width: 400px;" placeholder="省" @change="onProvinceChange($event)">
            <a-select-option :value="item.province" v-for="item in provinceList" :key="item.province">
              {{item.province }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="划分到的市" style="display: flex">
          <a-select v-decorator="['bind_city']" placeholder="市" style="width: 400px;">
            <a-select-option :value="item.city" v-for="item in cityList" :key="item.city">
              {{item.city}}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import formModalMixin from '@/mixins/formModalMixin'
import formTableMixin from '@/mixins/formTableMixin'

import { regionAdd } from '@/api/region'
import { cityLink, provinceLink} from "@/api/notControl";
const fields = [ 'province', 'city', 'bind_province', 'bind_city' ];
export default {
  mixins: [formModalMixin,formTableMixin],
  data () {
    this.fields = fields
    this.addAction = regionAdd
    return {
      cityList: [],
      provinceList: [],
      list: {
        province: '',
        city: '',
        bind_province: '',
        bind_city: '',
      }
    }
  },
  created () {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
  },
  methods: {
    onProvinceChange (province) {
        const provinceid = this.provinceList.find(item=>item.province === province).provinceid
      console.log(provinceid)
        return cityLink({ provinceid }).then(res => {
          this.cityList = res.data
          //this.queryParam.province = this.provinceList.find(item=>item.provinceid === provinceid).province
        })
    },
  }
}
</script>
